<template>
	<view>
		<view class="header">
			<!-- <swiper class="swiper" :current="current" indicator-color="rgba(255, 255, 255, 0.3)"
				indicator-active-color="#FFFFFF" :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="500" @change="changeSwiper">
				<swiper-item class="item" v-for="(item,index) in banners" :key="index">
					<image :src="configs.webUrl+item.src" mode="" :class="{'ac':current == index}"></image>
				</swiper-item>
			</swiper> -->
			<!-- <view style="background: red;">{{banners}}</view> -->
			<u-swiper :list="banners" previousMargin="50" keyName="image" nextMargin="50" indicatorMode="dot"
				:interval="3000" indicator circular :autoplay="true" radius="10" bgColor="#000000" height="400"
				@click="handleSwiperClick"></u-swiper>

			<!-- <swiper class="home-swiper-banner" indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#FFFFFF"
			:indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item,index) in banners" :key="index">
				<navigator :url="item.url">
					<image :src="configs.webUrl+item.url" mode="aspectFill"></image>
				</navigator>
			</swiper-item> -->

			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['banners'],
		// props: {
		// 	banners: {
		// 		type: Array,
		// 		default: () => []
		// 	}
		// },
		data() {
			return {
				banners1: [

				],
				// configs.cdnUrl
				configs: {
					imgUrl: 'https://rl.rollingshort.net', // 配置的基础图片URL
					cdnUrl: 'https://rls.rollingshort.net/uploads'
				},
			}
		},
		// watch: {
		// 	banners: {
		// 		// 当父组件传来的 banners 变化时，这个 handler 会被调用
		// 		handler(newValue) {
		// 			console.log("watch 监听到 props 变化:", newValue);

		// 			// 检查新值是否有效
		// 			if (!newValue || newValue.length === 0) {
		// 				this.internalBanners = [];
		// 				return;
		// 			}

		// 			// 处理数据：循环拼接地址
		// 			const processedBanners = newValue.map(banner => {
		// 				// 最好加个判断，防止重复拼接
		// 				if (banner.image && !banner.image.startsWith(this.configs.cdnUrl)) {
		// 					return {
		// 						...banner,
		// 						image: this.configs.cdnUrl + banner.image
		// 					};
		// 				}
		// 				return banner;
		// 			});

		// 			// 将处理好的新数组赋值给内部数据
		// 			// 这不会触发对 props banners 的 watch，因此不会有无限循环
		// 			this.internalBanners = processedBanners;
		// 			console.log("数据处理完毕，更新 internalBanners:", this.internalBanners);
		// 		},
		// 		// 【重要】添加 immediate: true
		// 		// 这样组件一加载时，就会立即执行一次 watch，处理父组件第一次传入的 banners
		// 		immediate: true
		// 	}
		// },
		// watch: {
		//     banners: {
		//       handler(newValue) {
		// 		  console.log(newValue,'newValue');
		// 		  if (newValue.length > 0 && !newValue[0].image.startsWith(this.IMAGE_BASE_URL)) {
		// 		      console.log("监听到 banners 变化，开始处理数据...");

		// 		      const processedBanners = newValue.map(banner => ({
		// 		        ...banner,
		// 		        image: this.configs.cdnUrl + banner.image
		// 		      }));

		// 		      this.banners = processedBanners;
		// 			  console.log('this.banners',this.banners);
		// 		    }

		//     }
		//   }
		//   },
		methods: {
			handleSwiperClick(index) {
				let item = this.banners[index]; // 取出 index 对应的数据
				console.log('Item clicked:', item); // 打印取出的数据
				if (item.link != '') {
					var fxpid = 1
					if (uni.getStorageSync("userinfo")) {
						fxpid = uni.getStorageSync("userinfo").id
					}
					uni.navigateTo({
						url: item.link + 106 + '&mid=' + 0 + '&fxpid=' + fxpid
					})
				}
			}
		},


	}
</script>

<style scoped lang="scss">
	.header {

		// padding-top: 100rpx;
		.swiper {
			height: 400px;
			position: relative;

			.item {
				position: relative;
				transition: transform 0.3s ease-in-out;
				/* 设置平滑过渡 */
			}

			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 18px;
				margin: auto;
				transition: transform 0.3s ease-in-out;
				/* 添加过渡 */
				transform: scale(0.9);
				/* 默认缩小 */
			}

			.ac {
				transform: scale(1.2);
				/* 激活时放大 */
			}

			.swiper-pagination {
				position: absolute;
				top: 10px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 10;
			}

			.swiper-pagination-bullet {
				background-color: rgba(255, 255, 255, 0.3) !important;
				transition: all 0.3s ease-in-out;
			}

			.swiper-pagination-bullet-active {
				background-color: #FFFFFF !important;
				transform: scale(1.2);
				/* 激活的分页点放大 */
				transition: all 0.3s ease-in-out;
			}
		}
	}

	::v-deep .uni-swiper-dots-horizontal {
		left: 50%;
		bottom: 28px;
		text-align: center;
		white-space: nowrap;
		transform: translate(-50%);
		position: absolute;
	}

	::v-deep .uni-swiper-dot {
		width: 16rpx;
		height: 16rpx;
		background: #FFFFFF;
		border-radius: 50%;
		transition: all 0.3s ease-in-out;
	}

	::v-deep .uni-swiper-dot-active {
		width: 20px;
		height: 16rpx;
		border-radius: 10px !important;
		background: #FFFFFF !important;
		transition: all 0.3s ease-in-out;
		border-radius: 0;
	}


	/* 	.home-swiper-banner {
		height: 350rpx;
		box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		overflow: hidden;
	}

	.home-swiper-banner image {
		width: 100%;
		height: 350rpx;
	} */
</style>